<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .box {
        height: 2000px;
        background-color: #999;
      }
      img {
        border: 1px solid #ccc;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <!-- 图片懒加载, 是默认图片的src不设置, 根据页面滚动的距离, 如果滚动距离到了图片的可视区, 动态的给图片设置src属性对应的值 -->
    <div class="box"></div>
    <img src="" />
    <div class="footer" style="height: 1000px; background-color: #999"></div>
  </body>
  <script>
    console.dir(document.querySelector('img')) // 图片距离页面顶部是2000
    window.addEventListener('scroll', () => {
      console.log(pageYOffset)
      // 滚动的距离超过2000 再加载图片的src属性
      if (pageYOffset >= 1250) {
        document.querySelector('img').src =
          'https://img0.baidu.com/it/u=4202555427,2074883164&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661533200&t=6a5014c2da365f7d2c10300602abfb2f'
      }
    })
  </script>
</html>
